import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const PopoverView = defineView({
  controller: "PopoverCacheCtrl",
  controllerAs: "$ctrl",
  template: /* HTML */ html`
    <div class="w-[80%] mx-auto">
      <h4>Dynamic</h4>
      <div class="form-group">
        <label>Popup Text:</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicPopover.content"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Popup Title:</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicPopover.title"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Popup Template:</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicPopover.templateUrl"
          class="form-control"
        />
      </div>
      <button
        uib-popover="{{$ctrl.dynamicPopover.content}}"
        popover-title="{{$ctrl.dynamicPopover.title}}"
        type="button"
        class="btn btn-default"
      >
        Dynamic Popover
      </button>

      <button
        uib-popover-template="$ctrl.dynamicPopover.templateUrl"
        popover-title="{{$ctrl.dynamicPopover.title}}"
        type="button"
        class="btn btn-default"
      >
        Popover With Template
      </button>

      <hr />
      <h4>Positional</h4>
      <div class="form-group">
        <label>Popover placement</label>
        <select
          class="form-control"
          ng-model="$ctrl.placement.selected"
          ng-options="o as o for o in $ctrl.placement.options"
        ></select>
      </div>
      <button
        popover-placement="{{$ctrl.placement.selected}}"
        uib-popover="On the {{$ctrl.placement.selected}}"
        type="button"
        class="btn btn-default"
      >
        Popover {{$ctrl.placement.selected}}
      </button>

      <hr />
      <h4>Triggers</h4>
      <p>
        <button
          uib-popover="I appeared on mouse enter!"
          popover-trigger="'mouseenter'"
          type="button"
          class="btn btn-default"
        >
          Mouseenter
        </button>
      </p>
      <input
        type="text"
        value="Click me!"
        uib-popover="I appeared on focus! Click away and I'll vanish..."
        popover-trigger="'focus'"
        class="form-control"
      />

      <hr />
      <h4>Other</h4>
      <button
        popover-animation="true"
        uib-popover="I fade in and out!"
        type="button"
        class="btn btn-default"
      >
        fading
      </button>
      <button
        uib-popover="I have a title!"
        popover-title="The title."
        type="button"
        class="btn btn-default"
      >
        title
      </button>
      <button
        uib-popover="I am activated manually"
        popover-is-open="popoverIsOpen"
        ng-click="$ctrl.popoverIsOpen = !$ctrl.popoverIsOpen"
        type="button"
        class="btn btn-default"
      >
        Toggle popover
      </button>
      <button uib-popover-html="$ctrl.htmlPopover" class="btn btn-default">
        HTML Popover
      </button>
      <button
        uib-popover-html="'<b>HTML</b>, <i>inline</i>'"
        class="btn btn-default"
      >
        HTML Popover (inline)
      </button>
      ${DebugButtonHTML("PopoverDemoCtrl")}
    </div>
  `,
});

export default PopoverView;
